<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <!-- 模版 -->
    <template id="newsItem">
      <img class="avatar" src="" />
      <div class="flex-vbox h-gap-20">
        <span class="title"></span>
        <div class="flex-hbox">
          <span class="author"></span>
          <span class="publish-date h-gap-20"></span>
        </div>
        <p class="abstract"></p>
        <div class="flex-hbox">
          <span class="like">like 9k</span>
          <span class="comments h-gap-20">comments 2.5k</span>
          <span class="share h-gap-20">shared 3.1k</span>
        </div>
      </div>
    </template>
    <template id="newsList">
      <div class="list-container">
        <slot name="renderItem" class="v-gap-20"></slot>
      </div>
    </template>
    <!-- 模版 -->


    <!-- 标签 -->
    <h1>HelloWorld</h1>
    <hello-world></hello-world>
    <h1>SayHello</h1>
    <say-hello username="Lee"></say-hello>
    <h1>UserCard</h1>
    <user-card></user-card>
    <h1>NewsItem</h1>
    <news-item></news-item>
    <h1>NewsList</h1>
    <news-list>
      <news-item slot="renderItem"></news-item>
    </news-list>
    <!-- 标签 -->

    <!-- 脚本 -->
    <script src="./HelloWorld.js"></script>
    <script src="./SayHello.js"></script>
    <script src="./UserCard.js"></script>
    <script>
      const info = { name: "Lee", age: 18 };
      const userCard = document.querySelector("wc-user-card");
      userCard.addEventListener("myevent", (e) => {
        alert(e.detail.message);
      });
      userCard.setAttribute("info", JSON.stringify(info));
    </script>
    <script src="./NewsItem.js"></script>
    <script src="./NewsList.js"></script>
    <script>
      const news = [
        {
          title: "Biden ended that program",
          avatar: "http://img.sevem.cn/400x400/000/fff",
          abstract:
            "Great honor to have the endorsement of the Governor of Puerto Rico, Wanda Vázquez Garced. As I have always said, Donald J. Trump is the best thing to ever happen to the people of Puerto Rico. The drug manufacturers are now coming back. Biden ended that program!",
          author: "Donald J. Trump",
          publishDate: "2020-10-09",
        },
        {
          title: "An American journalist",
          avatar: "http://img.sevem.cn/400x400/000/fff",
          abstract:
            "An American journalist and her mother, who were outspoken against the Assad regime and ISIS, were murdered in their Istanbul home in 2017.But questions about the case linger—who killed Halla & Orouba Barakat? And why?",
          author: "ABC News",
          publishDate: "Yesterday",
        },
        {
          title: "Great Firewall",
          avatar: "http://img.sevem.cn/400x400/000/fff",
          abstract: "Chinese app allows small glimpse beyond 'Great Firewall'",
          author: "Reuters",
          publishDate: "7 mins ago",
        },
      ];

      const newsItem = document.querySelector("news-item");
      newsItem.setAttribute("news", JSON.stringify(news[0]));

      const newsList = document.querySelector("news-list");
      newsList.setAttribute("newslist", JSON.stringify(news));
    </script>
    <!-- 脚本 -->
  </body>
</html>
